// 浏览器前缀混入
@mixin prefix($property, $value) {
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -ms-#{$property}: $value;
    -o-#{$property}: $value;
    #{$property}: $value;
}

// 弹性布局混入
@mixin flex($direction: row, $justify: center, $align: center) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
}

// 过渡动画混入
@mixin transition($properties...) {
    $transitions: ();
    @each $property in $properties {
        $transitions: append($transitions, $property $animation-duration $animation-timing, comma);
    }
    transition: $transitions;
}

// 变换混入
@mixin transform($transform) {
    transform: $transform;
}

// 动画混入
@mixin animation($name, $duration: $animation-duration, $timing: $animation-timing, $delay: 0s, $iteration: 1, $direction: normal, $fill: forwards) {
    animation: $name $duration $timing $delay $iteration $direction $fill;
}

// 阴影混入
@mixin shadow($size: 'md') {
    @if $size == 'sm' {
        box-shadow: $shadow-sm;
    } @else if $size == 'md' {
        box-shadow: $shadow-md;
    } @else if $size == 'lg' {
        box-shadow: $shadow-lg;
    }
}

// 响应式混入
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    }
}

// 深色模式混入
@mixin dark-mode {
    @media (prefers-color-scheme: dark) {
        @content;
    }
}

// 主题色混入
@mixin theme-color($property, $light-value, $dark-value) {
    #{$property}: $light-value;
    
    @include dark-mode {
        #{$property}: $dark-value;
    }
}

// 模糊背景混入
@mixin backdrop-blur($blur) {
    backdrop-filter: blur($blur);
    -webkit-backdrop-filter: blur($blur);
}

// 渐变背景混入
@mixin gradient($direction, $start-color, $end-color) {
    background: linear-gradient($direction, $start-color, $end-color);
}

// 文本溢出省略混入
@mixin text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本溢出省略混入
@mixin text-ellipsis-multi($lines) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

// 清除浮动混入
@mixin clearfix {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

// 禁用选择混入
@mixin no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

// 隐藏滚动条混入
@mixin hide-scrollbar {
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
}

// 自定义滚动条混入
@mixin custom-scrollbar($width: 8px, $track-color: $bg-color, $thumb-color: $border-color) {
    &::-webkit-scrollbar {
        width: $width;
    }
    
    &::-webkit-scrollbar-track {
        background: $track-color;
        border-radius: $border-radius;
    }
    
    &::-webkit-scrollbar-thumb {
        background: $thumb-color;
        border-radius: $border-radius;
        
        &:hover {
            background: darken($thumb-color, 10%);
        }
    }
}

// 禁用混入
@mixin disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

// 焦点样式混入
@mixin focus-style {
    &:focus-visible {
        outline: 3px solid $focus-color;
        outline-offset: 2px;
    }
}

// 加载动画混入
@mixin loading-spinner($size: 20px, $border-width: 2px, $color: $primary-color) {
    width: $size;
    height: $size;
    border: $border-width solid transparent;
    border-top-color: $color;
    border-radius: 50%;
    @include animation(spin, 1s, linear, 0s, infinite);
}

// 波纹效果混入
@mixin ripple($color: rgba(255, 255, 255, 0.3)) {
    position: relative;
    overflow: hidden;
    
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        background-image: radial-gradient(circle, $color 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform 0.5s, opacity 1s;
    }
    
    &:active::after {
        transform: scale(0, 0);
        opacity: 0.3;
        transition: 0s;
    }
}

// 骨架屏混入
@mixin skeleton-loading {
    background: linear-gradient(
        90deg,
        $bg-color 25%,
        lighten($bg-color, 5%) 37%,
        $bg-color 63%
    );
    background-size: 400% 100%;
    @include animation(skeleton-loading, 1.4s, ease, 0s, infinite);
}

// 工具提示混入
@mixin tooltip($content: '', $position: 'top') {
    position: relative;
    
    &::before {
        content: $content;
        position: absolute;
        padding: 5px 10px;
        background: $bg-color-dark;
        color: $text-color-light;
        border-radius: $border-radius;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        @include transition(opacity, visibility);
        
        @if $position == 'top' {
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-5px);
        } @else if $position == 'bottom' {
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(5px);
        } @else if $position == 'left' {
            right: 100%;
            top: 50%;
            transform: translateY(-50%) translateX(-5px);
        } @else if $position == 'right' {
            left: 100%;
            top: 50%;
            transform: translateY(-50%) translateX(5px);
        }
    }
    
    &:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
} 